<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>

<script src="js/hnl-datePickerObj.js" type="text/javascript"></script>
<script src="js/hnl-referral.js" type="text/javascript"></script>
<script src="js/plugin/jquery.textarea-expander.js"
	type="text/javascript"></script>
<script src="js/plugin/jquery.rating.js" type="text/javascript"></script>

<link href="css/jquery/jquery.rating.css" rel="stylesheet"></link>
<script>
	var tid = getFromAttribute(${param.talentID});

	$(document).ready(
		function() {
			//destroyHNLTabDialogs();
			summiterAction();
			var saveTalentBtn = $("#saveTalentBtn");			
			if(tid==0){		
				saveTalentBtn.attr("value", "Add");
				$("#talentTabs").tabs({disabled: [1,2]});
				$("#noAddDelReferral").show();
			}else{					
				$("#addDelReferral").show();
				saveTalentBtn.attr("value", "Update");
			}
						
			var birthdayDatePicker = new HnlDatePickerObj("#birthday");
			birthdayDatePicker.buildDatePicker();
			
			initReferral();
			
			/*Load Form Info*/
			loadPersonalInfoForm();
			    
			$("#backToMain").click(function(evt) {
				evt.preventDefault();		
				window.top.location.href = "dashboard.jsp";					
			});
				
			var validatePersonalInfoDialog = new HnlDialogObj("#dialog-talent-fields-required");
			validatePersonalInfoDialog.buildDialog();
			validatePersonalInfoDialog.addDialogFunctions();
			
			saveTalentBtn.click(function(evt) {
				evt.preventDefault();
				if(hasInvalidInput_main(validatePersonalInfoDialog)){
					return false;
				}				
				saveTalentBtn.attr("disabled",true);
				joinInfoForms("#careerInfo","#personalInfo");				
				$("#personalInfo").attr("action", "/hnl/AddTalent.do?talentID="+tid+"&tabID=0");
				$("#personalInfo").attr("method", "post");
				$("#personalInfo").submit();
			});
		});
	
	function loadPersonalInfoForm() {
		$.getJSON("/hnl/LoadTalentInfo.do?talentID=" + tid, function(data) {
			$("#eFirstName").val(data.eFirstname);
			$("#eLastName").val(data.eLastname);
			$("#cFirstName").val(data.cFirstname);
			$("#cLastName").val(data.cLastname);
			$("#birthday").val(data.GUIBirdayText);			
			$("#Address").val(data.address);
			$("#officeTel").val(data.officeTel);
			$("#homeTel").val(data.homePhone);
			$("#cell1").val(data.cell1);
			$("#cell2").val(data.cell2);
			$("#comMail").val(data.comMail);
			$("#others").val(data.others);
			$("#additionalRef").val(data.additionalReferenceInfo);

			/* Star Rating */
			var rating = data.rating;
			if(rating != undefined && rating.length > 0 && rating > 0) {
				$("input[name=starRating]").rating('select', rating);
			}
			
			/* Radio Value */
				$.getJSON("/hnl/PopulateDropdown.do?typeName=GENDER", function(
						jasonData) {					
					setRadioBoxValue(jasonData,"gender",data.gender);				
				});
				
				$.getJSON("/hnl/PopulateDropdown.do?typeName=MARITAL_STATUS", function(
						jasonData) {					
					setRadioBoxValue(jasonData,"marital", data.maritalStatus);					
				});
			/* Dropdown list */
			$.getJSON("/hnl/PopulateDropdown.do?typeName=NATIONALITY", function(
					dropdowndata) {
				setdropdown(dropdowndata, "#nationalityOpt", data.nationality);
			});
		})
	}

	function hasInvalidInput_main(validatePersonalInfoDialog) {
		var efirstname = $.trim($("#eFirstName").val());
		var elastname = $.trim($("#eLastName").val());
		var cfirstname = $.trim($("#eFirstName").val());
		var clastname = $.trim($("#eFirstName").val());
		if (efirstname == "" && elastname == "" && cfirstname == ""
				&& clastname == "") {
			validatePersonalInfoDialog.dialogObj.dialog("open");
			return true;
		}
		return false;
	}
</script>

</head>
<body>
	<form id="personalInfo" accept-charset="UTF-8" >
		<fieldset class="mainFieldSet" >
			<legend class="mainLegend">Personal Info</legend>
			<table class="fourColumn talentForm">
				<tbody>
					<tr>
						<td class="oddCol">First Name (English)</td>
						<td class="evenCol"><input type="text" id="eFirstName"
							name="eFirstName" value="" maxlength="50" />
						</td>
						<td class="oddCol Column_Text_Align">Last Name (English)</td>
						<td class="evenCol"><input type="text" id="eLastName"
							name="eLastName" maxlength="50" /></td>
					</tr>
					<tr>
						<td>First Name (Chinese)</td>
						<td><input type="text" id="cFirstName" name="cFirstName"
							maxlength="50" />
						</td>
						<td class="Column_Text_Align">Last Name (Chinese)</td>
						<td><input type="text" id="cLastName" name="cLastName"
							maxlength="50" /></td>
					</tr>
					<tr>
						<td>Birthday</td>
						<td><input type="text" id="birthday" name="birthday" readonly='readonly'/></td>
						<td class="oddCol Column_Text_Align">Country</td>
						<td><select name="nationalityOpt" id="nationalityOpt"></select>
						</td>
					</tr>
					<tr>
						<td >Gender</td>
						<td><input title="Male" type="radio" name="gender" checked>Male</input><input
							title="Female" type="radio" name="gender">Female</input></td>
						<td class="oddCol Column_Text_Align">Marital Status</td>
						<td colspan="3"><input type="radio" title="N/A"
							name="marital" value="1" checked>N/A</input><input type="radio"
							title="Single" name="marital">Single</input> <input type="radio"
							title="Married" name="marital">Married</input>
						</td>
					</tr>					
					<tr>
						<td>Phone Line</td>
						<td><input type="text" name="officeTel" id="officeTel"
							maxlength="50"></input></td>
						<td class="Column_Text_Align">Home Tel.</td>
						<td><input type="text" name="homeTel" id="homeTel"
							maxlength="50"></input>
						</td>						
					</tr>					
					<tr>
						<td>Cell Phone #1</td>
						<td><input type="text" name="cell1" id="cell1" maxlength="50"></input>
						</td>
						<td class="Column_Text_Align">Cell Phone #2</td>
						<td><input type="text" name="cell2" id="cell2" maxlength="50">
						</td>
					</tr>
					<tr>
						<td>Email</td>
						<td colspan="3"><input type="text" name="comMail"
							id="comMail" maxlength="200"></input>
						</td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Referrer Info</legend>
			<div style="display: none" id="noAddDelReferral">Please create
				the talent by clicking on "Add" before adding any Referrer Info</div>
			<div style="display: none" id="addDelReferral">
				<input type="image" id="addReferral" src="./images/add.png" />&nbsp;&nbsp;
				<input type="image" id="delReferral" src="./images/del.png" />
			</div>
			<div id="referralTb"></div>
			<table class="twoColumn talentForm">
				<tr>
					<td class="firstCol">Additional Reference Info</td>
					<td class="secondCol"><textarea type="text"
							name="additionalRef" id="additionalRef" class="expand25-80"></textarea>
					</td>
				</tr>
			</table>
		</fieldset>
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Other Personal Info</legend>
			<table class="twoColumn talentForm">
				<tbody>				
					<tr>
						<td class="firstCol">Star Rating</td>
						<td class="secondCol">
							<input name="starRating" type="radio" class="star" value="1" />
							<input name="starRating" type="radio" class="star" value="2"/>
							<input name="starRating" type="radio" class="star" value="3"/>
							<input name="starRating" type="radio" class="star" value="4"/>
							<input name="starRating" type="radio" class="star" value="5"/>
						</td>
					</tr>			
					<tr>
						<td class="firstCol">Address</td>
						<td class="secondCol"><textarea type="text" name="Address"
								id="Address" class="expand25-80"></textarea></td>
					</tr>
					<tr>
						<td>Others</td>
						<td><textarea type="text" name="others"
								id="others" class="expand25-80"></textarea></td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<br />
		<div>
			<input type=button id="saveTalentBtn" /> <input type=button
				id="backToMain" value="Back to Main" />
		</div>
	</form>

	<div id="dialog-referral" title="Add Referrer">
		<form id="referralForm" class="talentForm">
			<fieldset class="mainFieldSet">
				<table class="dialogReferral PopupDialog">
					<tbody>
						<tr>
							<td class="firstCol">Referrer <em>*</em></td>
							<td class="secondCol"><input type="text" name="referral" id="referral" />
							</td>
						</tr>
						<tr>
							<td>Relationship with the Candidate <em>*</em></td>
							<td><input type="text" name="relationship" id="relationship"
								maxlength="50" /></td>
						</tr>
						<tr>
							<td></td>
							<td><input type="checkbox" name="isPrimary" id="isPrimary" />Primary
								Referrer</td>
						</tr>
						<tr>
							<td>Comment</td>
							<td><textarea type="text" name="referralComment"
									id="referralComment" rows="8" cols="40"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
				<input type="hidden" id="referralID" name="referralID" />
			</fieldset>
		</form>
	</div>

	<div id="dialog-deleteReferral" title="Delete Referral Message">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Do you really want
			to delete Referrer(s) from the database?
		</p>
	</div>
	<div id="dialog-no-referral-selected" title="Message">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span> No Referrer(s)
			Selected.
		</p>
	</div>
	<div id="dialog-talent-fields-required" title="Missing Required Fields">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span> Required fields
			missing.</br> </br> <font color="red">English firstname and English
				lastname</font> or </br> <font color="red">Chinese first name and last
				name is required.</font>
		</p>
	</div>
	<div id="dialog-referral-fields-required"
		title="Missing Required Fields">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span> Required fields
			missing.</br> <font color="red">Referral name and relationship are
				required</font>
		</p>
	</div>
	<div id="dialog-referral-exist" title="Message">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span> The referral
			already exist.
		</p>
	</div>
</body>
</html>
